<template>
	<view class="pageContent">
		<view class="memberMain">
			<view class="memberItem">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">房屋信息</view>
				<view class="memberRight">
					<view class="memberItIn" v-if="formData.roomInfo">{{formData.roomInfo+'-'+formData.roomName}}</view>
				</view>
			</view>
			<view class="memberItem">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">成员真名</view>
				<view class="memberRight">
					<view class="memberItIn">{{formData.name || ''}}</view>
				</view>
			</view>
			<view class="memberItem">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">申请身份</view>
				<view class="memberRight">
					<view class="memberItIn">{{formData.roleName || ''}}</view>
				</view>
			</view>
			<view class="memberItem">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">身份证号</view>
				<view class="memberRight">
					<view class="memberItIn">{{formData.idCardNumber || ''}}</view>
				</view>
			</view>
			<view class="memberItem">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">手机号码</view>
				<view class="memberRight">
					<view class="memberItIn">{{formData.telephone || ''}}</view>
				</view>
			</view>
			<view class="memberItem" v-if="formData.idCardFrontUrl || formData.idCardBackUrl">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">证件照片</view>
				<view class="memberUpload">
					<image class="memberUpTrueIc" v-if="formData.idCardFrontUrl" :src="formData.idCardFrontUrl"
						@click="showPhoto(formData.idCardFrontUrl)" />
					<image class="memberUpTrueIc" v-if="formData.idCardBackUrl" :src="formData.idCardBackUrl"
						@click="showPhoto(formData.idCardBackUrl)" />
				</view>
			</view>
			<view class="memberItem">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">选择有效日期</view>
				<picker class="comePicRight" mode="date" :value="dateLim" @change="chooseLim">
					<!-- <view class="memberItIn">{{formData.dateLim}}</view> -->
					<input class="comePicLimIn" v-model="formData.dateLim" :placeholder="placeholder5"
						disabled="true" />
					<image class="comePicLim" :src="localImages +'/date.png'" mode="scaleToFill" />
				</picker>
			</view>
			<view class="memberItem" v-if="formData.applyReason">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">TA的留言</view>
				<view class="memberRightMsg">
					<view class="memberItIn">{{formData.applyReason || ''}}</view>
				</view>
			</view>
			<view class="memberItem">
				<text class="memberItSt empty">*</text>
				<view class="memberItTi">审批意见</view>
				<view class="memberRight">
					<input class="memberItIn" v-model="message" placeholder="请填写审批意见" maxlength="20" />
				</view>
			</view>
			<view class="btMain" v-if="type==0">
				<button class="btOne grey" @click="approvaPut(2)">拒绝</button>
				<button class="btOne" @click="approvaPut(1)">同意</button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				id: '',
				formData: {
					roomInfo: '',
					dateLim: '',
					expireDate: '',
				},
				dateLim: '',
				message: '',
				type: '',
			}
		},

		onLoad(options) {
			var title = '成员入住审批'
			this.id = options.id || 629;
			this.type = options.type || 0;
			if (this.type == 1) {
				var title = '审批详情'
			}
			wx.setNavigationBarTitle({
				title: title
			})
			this.approva();

		},

		onShow() {},

		onUnload() {
			this.reset()
		},

		methods: {
			reset() {
				this.message = ""
			},

			chooseLim(e) {
				console.log('chooseLim', e)
				this.dateLim = e.detail.value
				this.formData.dateLim = e.detail.value
			},

			async approva() {
				var url = '/UserServer/owner/info/approva'
				var params = {
					roomApplyId: this.id,
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				this.formData = param;
				this.formData.dateLim = param.expireDate || '永久有效';
				this.dateLim = param.expireDate || '';
			},

			async approvaPut(result = 0) {
				//租客撤回传0,业主：同意传1，拒绝传2.
				//同意审批,并且业主选择了日期，进行日期判断
				var dateLim = this.dateLim
				if (result == 1 && !!dateLim.match(/^\d{4}\-\d{1,2}\-\d{1,2}$/)) {
					var date = new Date(dateLim.replace(/-/g, "/"))
					var nowDate = new Date(new Date().format("yyyy/MM/dd"))
					// console.log('diffTime', nowDate-date)
					if (date < nowDate) {
						wx.showToast({
							title: "有效日期已经失效，请重新选择日期",
							icon: 'none'
						});
						return;
					}
				}
				var url = '/UserServer/owner/info/approva?'
				var params = {
					roomApplyId: this.id,
					processResult: result,
					expireDate: dateLim,
				}
				if (this.message) {
					params['message'] = this.message
				}
				var paramUrl = util.stringifyQs(params)
				url = url + paramUrl
				var options = {
					url,
					params: {},
					method: 'PUT',
				}
				await util.requestPro(options);
				wx.showToast({
					title: '操作成功',
					icon: 'none'
				})
				setTimeout(() => {
					wx.navigateBack()
				}, 500)
			},

			showPhoto(...url) {
				console.warn('showPhoto', url)
				wx.previewImage({
					current: '', // 当前显示图片的http链接
					urls: url // 需要预览的图片http链接列表
				})
			},

		},

	}
</script>

<style scoped>
	.pageContent {
		background: #F3F6F9;
		padding: 20rpx 0rpx 0rpx 0rpx;
	}

	.memberTitle {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		padding: 30rpx 0rpx 20rpx 30rpx;
	}

	.memberMain {
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 20rpx 30rpx;
	}

	.memberMaTi {
		color: #333333;
		line-height: 42rpx;
		font-size: 30rpx;
		padding: 0rpx 0rpx 10rpx 0rpx;
	}

	.memberType {
		display: inline-block;
		width: 150rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 6rpx;
		text-align: center;
		border: 1rpx solid #999999;
	}

	.memberType.select {
		background-color: #7A71FF;
		color: #FFFFFF;
	}

	.memberType+.memberType {
		margin-left: 30rpx;
	}

	.memberItem {
		display: flex;
		align-items: center;

		font-size: 30rpx;
	}

	.memberItSt {
		color: #FF6E5D;
	}

	.memberItSt.empty {
		color: #FFFFFF;
	}

	.memberItTi {
		width: 150rpx;
		color: #333333;
		margin-right: 40rpx;

		white-space: nowrap;
	}

	.memberRight {
		display: flex;
		height: 90rpx;
		width: 100%;
		align-items: center;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.memberRightMsg {
		display: flex;
		width: 100%;
		min-height: 90rpx;
		align-items: center;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.memberItIn {
		width: 88%;
	}

	.memberItIc {
		width: 35rpx;
		height: 30rpx;

		margin: 0rpx 10rpx 0rpx 20rpx;
	}

	.perType {
		display: inline-block;
		width: 90rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 4rpx;
		text-align: center;
		margin-right: 20rpx;
		color: $primary;
		border: 1rpx solid $primary;
	}

	.perType.select {
		background-color: $primary;
		color: #FFFFFF;
	}

	.comePicRight {
		position: relative;
		display: flex;
		height: 90rpx;
		width: 100%;
		align-items: center;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.comePicLimIn {
		width: 100%;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 36rpx;
		padding: 0rpx 10rpx 0rpx 0rpx;
		// border: 1rpx solid #E7E7E7;
	}

	.comePicLim {
		position: absolute;
		right: 0rpx;
		top: 28rpx;
		width: 35rpx;
		height: 30rpx;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.memberUpload {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.memberUpTrueIc {
		display: inline-block;
		vertical-align: top;
		width: 230rpx;
		height: 152rpx;
	}

	.btMain {
		display: flex;
	}

	.btOne {
		flex: 1;
		margin: 60rpx 16rpx 0rpx 16rpx;
	}

	.btOne.grey {
		background-color: #bbb;
	}
</style>
